/**
 * @page: 账号信息
 * @author:yangshaopeng
 */
import React, { useState, useEffect } from 'react';
import {
  Button,
  Input,
  Form,
  DatePicker,
  Radio,
  Cascader,
  message,
  Select,
} from 'antd';
import { real_name, mobile } from '@/utils/rule';
import { customTrimFunc } from '@/utils/utils.jsx';
import moment from 'moment';
import CommonLoading from '@/components/CommonLoading';
import CommonImgsLoad from '@/components/CommonImgsLoad';
import { RewriteUserMessage, queryCurrentUser } from './service';
import { getCurrentUser, setCurrentUser } from '@/utils/authority.js';
import { getAllArea } from '@/services/common.js';
import styles from './index.module.less';
import useUserStore from '@/stores/user';

const { Option } = Select;

const AccountInfo = () => {
  useEffect(() => {
    handleGetCurrentUsers();
    handleGetProvinceList();
  }, []);

  const [form] = Form.useForm();
  const [data, setData] = useState([]);
  const [mapList, setMapList] = useState([]);
  const [areaList, setAreaList] = useState([]);
  const [load, setLoad] = useState(false);
	const updateUserInfo = useUserStore(state => state.updateUserInfo);

  useEffect(() => {
    form.resetFields();
  }, [data]);

  const handleGetCurrentUsers = async () => {
    const res = await queryCurrentUser({
      tenantCode: '000000',
    });
    if (res.success) {
      setCurrentUser(res.data);
      setData(res.data);
    }
  };

  const handleGetProvinceList = async () => {
    const res = await getAllArea();
    const mapList = {};
    function createMapList(data) {
      data.map(function (item) {
        const key = item.id;
        const value = item.name;
        Object.assign(mapList, { [key]: value });
        if (item.childs && item.childs.length) {
          createMapList(item.childs);
        }
      });
    }
    if (res.success) {
      createMapList(res.data);
      setMapList(mapList);
      setAreaList(res.data);
    }
  };

  const onFinish = (val) => {
    handleSubmit(val);
  };

  const handleSubmit = async (val) => {
    setLoad(true);
    val.birthday = moment(val.birthday).format('YYYY-MM-DD');
    val.id = data.id;
    val.userInfoId = data.userInfoId;
    val.provinceId = val.area[0];
    val.cityId = val.area[1];
    val.areaId = val.area[2];
    val.provinceName = mapList[val.area[0]];
    val.cityName = mapList[val.area[1]];
    val.areaName = mapList[val.area[2]];
    val.type = 1;
    delete val.area;
    const newParams = customTrimFunc({
      ...val,
      account: getCurrentUser().account,
    });
    const res = await RewriteUserMessage(newParams);
    if (res.success) {
      message.success('修改成功');
			updateUserInfo();
      handleGetCurrentUsers();
    }
    setLoad(false);
  };

  const handleHeaderImgUpload = (val) => {
    form.setFieldsValue({ headImgUrl: val });
  };

  const handleCreditImgUpload = (val) => {
    form.setFieldsValue({ goodCreditImage: val });
  };

  const handlePicInfoImgUpload = (val) => {
    form.setFieldsValue({ picInfoImage: val });
  };

  return (
    <div className="zjf-container-nof">
      <h1 className={`${styles.pageTitle} common-color3`}>基本信息</h1>
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        form={form}
        name="account-info-index"
        layout="horizontal"
        onFinish={onFinish}
        initialValues={{
          ...data,
          birthday: data.birthday && moment(data.birthday, 'YYYY-MM-DD'),
          area: [data.provinceId, data.cityId, data.areaId],
          headImgUrl: data.headImgUrl,
          goodCreditImage: data.goodCreditImage,
          picInfoImage: data.picInfoImage,
          industrialBeltFlag: INDUSTRIAL_BELT_FLAG,
          supplierLocation: data.supplierLocation
        }}
      >
        <Form.Item label="用户头像" name="headImgUrl">
          <CommonImgsLoad
            isCrop={true}
            img={data.headImgUrl}
            handleOk={handleHeaderImgUpload}
          />
        </Form.Item>
        <Form.Item label="用户名" autoComplete="off" rules={[real_name]}>
          <div className={styles.userNameStyle}>
            <p>{data.account ? data.account : '--'}</p>
          </div>
        </Form.Item>
        <Form.Item
          label="用户名简称"
          name="shortName"
          validateFirst={true}
          rules={[
            { required: true, message: '请输入用户名简称' },
            { required: true, max: 10 },
          ]}
        >
          <Input
            style={{ width: 260 }}
            placeholder="请输入用户名简称，不超过10个字符"
          />
        </Form.Item>
        <Form.Item label="真实姓名" name="name">
          <Input style={{ width: 260 }} placeholder="请填写真实姓名" />
        </Form.Item>
        <Form.Item
          label="行业"
          name="industrialBeltFlag"
        >
          <Select style={{ width: 260 }} placeholder="全部" allowClear disabled>
            <Option value={1}>服装</Option>
            <Option value={0}>家纺</Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="供货地"
          rules={[{ required: true, message: '请选择' }]}
          name="supplierLocation"
        >
          <Select style={{ width: 260 }} placeholder="全部" allowClear>
            {
							APP_TITLE == '找家纺' ? 
							<Option value={1}>南通</Option>
							:
							<>
								<Option value={2}>常熟</Option>
								<Option value={3}>织里</Option>
							</>
						}
          </Select>
        </Form.Item>
        <Form.Item
          label="性别"
          name="sex"
          rules={[{ required: true, message: '请选择性别' }]}
        >
          <Radio.Group>
            <Radio value={0}>保密</Radio>
            <Radio value={1}>男</Radio>
            <Radio value={2}>女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="生日"
          name="birthday"
          rules={[{ required: true, message: '请选择生日' }]}
        >
          <DatePicker format="YYYY-MM-DD" style={{ width: 260 }} />
        </Form.Item>
        <Form.Item
          label="手机号"
          name="mobile"
          rules={[{ required: true, message: '请输入手机号' }, mobile]}
        >
          <Input style={{ width: 260 }} placeholder="请填写手机号" disabled />
        </Form.Item>
        <Form.Item
          name="area"
          label="所在地区"
          rules={[{ required: true, message: '地区未选择' }]}
        >
          <Cascader
            fieldNames={{ label: 'name', value: 'id', children: 'childs' }}
            style={{ width: 260 }}
            options={areaList}
          />
        </Form.Item>
        <Form.Item
          label="详细地址"
          name="address"
          rules={[{ required: true, message: '请填写详细地址' }]}
        >
          <Input style={{ width: 260 }} placeholder="请填写详细地址" />
        </Form.Item>
        <Form.Item label="阿里旺旺" name="ww">
          <Input style={{ width: 260 }} placeholder="请填写阿里旺旺" />
        </Form.Item>
        <Form.Item label="QQ" name="qq">
          <Input style={{ width: 260 }} placeholder="请填写QQ" />
        </Form.Item>
        <Form.Item label="吊牌" name="picInfoImage">
          <CommonImgsLoad
            img={data.picInfoImage}
            className="middle"
            handleOk={handlePicInfoImgUpload}
          />
        </Form.Item>
        <Form.Item
          label="吊牌2"
          name="goodCreditImage"
          extra={
            <span className="common-color9">
              网店未设置吊牌、吊牌2时，最后读取这里吊牌数据
            </span>
          }
        >
          <CommonImgsLoad
            img={data.goodCreditImage}
            className="middle"
            handleOk={handleCreditImgUpload}
          />
        </Form.Item>
        <Form.Item label=" " colon={false}>
          <Button htmlType="submit" type="primary">
            保存
          </Button>
        </Form.Item>
      </Form>
      <CommonLoading loading={load} />
    </div>
  );
};
export default AccountInfo;
